import Taro, { Component } from "@tarojs/taro";
import {View, Input, Picker, Image, Text, Form, Button} from "@tarojs/components";
import PageFooterInfo from '../../components/PageFooterInfo'
import PickerArea from '../../components/PickerArea'
import {getRuntime,typeOfInsuranceArr,projectTypeArr,projectDate} from "../../utils/common";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'

import './index.less'
import right from '../../assets/img/right.png'
import point_on from '../../assets/img/icon_23.png'
import line_on from '../../assets/img/icon_24.png'
import point from '../../assets/img/icon_25.png'
import line from '../../assets/img/icon_26.png'

// 工程金融中心-工程保函中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Page1StepTwo extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    typeOfInsuranceArr:typeOfInsuranceArr, // 险种 ,
    typeOfInsurance:'', // 险种 ,
    companyName:'', // 公司名称 ,
    amount: null, // 金额 ,
    countryOrArea:'', // 国家/地区 ,
    enterpriseSituation:'', // 企业情况 ,
    projectTypeArr:projectTypeArr, // 项目类型 ,
    projectType:'', // 项目类型 ,
    constructionPeriodArr:projectDate, // 工期 ,
    constructionPeriod:'', // 工期 ,
    enterpriseQualification: '', // 企业资质

    loading: false,
    disabled: false,
    submitText: '立即计算'
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '工程保函中心'})
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  onChangePicker(type: string, e) {
    this.setState({
      [type]: this.state[type+'Arr'][e.detail.value]
    })
  }

  pickerArea(res) {
    this.setState({
      countryOrArea: res.province.label+res.city.label+res.distract.label
    })
  }

  submit(e) {
    let { typeOfInsurance, countryOrArea, projectType, constructionPeriod } = this.state
    let {companyName, amount,enterpriseSituation, enterpriseQualification} = e.detail.value
    if(!typeOfInsurance) { getRuntime().showToast('请选择险种~'); return }
    //if(!countryOrArea) { getRuntime().showToast('请选择国家/地区~'); return }
    //if(!projectType) { getRuntime().showToast('请选择项目类型~'); return }
    //if(!constructionPeriod) { getRuntime().showToast('请选择工期~'); return }
    //if(!companyName) { getRuntime().showToast('请填写公司全称~'); return }
    if(!amount) { getRuntime().showToast('请填写金额~'); return }
    //if(!enterpriseSituation) { getRuntime().showToast('请填写企业情况~'); return }
    //if(!enterpriseQualification) { getRuntime().showToast('请填写企业资质~'); return }
    let { FinancialCenterStore } = this.props.stores
    FinancialCenterStore.saveInfoAndCalculationMoney({
      form: {
        typeOfInsurance,
        companyName,
        amount,
        countryOrArea,
        enterpriseSituation,
        projectType,
        constructionPeriod,
        enterpriseQualification
      },
      callback: (res) => {
        if(res.bfAmountOfMoney&&res.freeAmountOfMoney) {
          // 缓存数据第三步使用
          getRuntime().setStorage('projectInsurance', res)
          getRuntime().navigateTo(`/pages/finance/page1_step_two?bfAmountOfMoney=${res.bfAmountOfMoney}&freeAmountOfMoney=${res.freeAmountOfMoney}`)
        }
      }
    })
  }

  render() {
    let { typeOfInsuranceArr,typeOfInsurance,projectTypeArr,projectType,constructionPeriodArr,constructionPeriod } = this.state
    return(
      <View className='from-wrap'>
          <View className='step-line'>
            <View className={'step-icon'}>
              <Image src={point_on} className={'point'} />
              <Image src={line_on} className={'line'} />
              <Image src={point} className={'point'} />
              <Image src={line} className={'line'} />
              <Image src={point} className={'point'} />
            </View>
            <View className={'step-content'}>
              <Text className='title'>保费计算</Text>
              <Text className='title'>提交资料</Text>
              <Text className='title'>预约办理</Text>
            </View>
          </View>
        <Form onSubmit={this.submit.bind(this)}>
            <View className='item-group pt0 pb0'>
              <View className='input-group '>
                <View className='input-name'>选择险种</View>
                <Picker className='input-picker' mode='selector' range={typeOfInsuranceArr} onChange={this.onChangePicker.bind(this,'typeOfInsurance')}>
                  <View className='tt'>
                    {!typeOfInsurance&&<View className='from-input picker-con placeholder-class' >点击选择</View>}
                    {typeOfInsurance&&<View className='from-input picker-con' >{typeOfInsurance}</View>}
                    <Image className='drop-down-icon' src={right}/>
                  </View>
                </Picker>
              </View>

              <View className='input-group'>
                <View className='input-name'>公司全称</View>
                <Input className='from-input' name='companyName' placeholderClass='placeholder_class' placeholder='请填写公司全称' />
              </View>

              <View className='input-group'>
                <View className='input-name'>金额(元)</View>
                <Input className='from-input' name='amount' type='number' placeholderClass='placeholder_class' placeholder='请填写保证金金额' />
              </View>

              <View className='input-group '>
                <View className='input-name'>国家/地区</View>
                <PickerArea onPicketArea={this.pickerArea.bind(this)} />
              </View>

              <View className='input-group '>
                <View className='input-name'>企业情况</View>
                <Input className='from-input' name='enterpriseSituation' placeholderClass='placeholder_class' placeholder='请填写企业情况' />
              </View>

              <View className='input-group '>
                <View className='input-name'>项目类型</View>
                <Picker className='input-picker' mode='selector' range={projectTypeArr} onChange={this.onChangePicker.bind(this,'projectType')}>
                  <View className='tt'>
                    {!projectType&&<View className='from-input picker-con placeholder-class' >点击选择</View>}
                    {projectType&&<View className='from-input picker-con' >{projectType}</View>}
                    <Image className='drop-down-icon' src={right} />
                  </View>
                </Picker>
              </View>

              <View className='input-group '>
                <View className='input-name'>工期</View>
                <Picker className='input-picker' mode='selector' range={constructionPeriodArr} onChange={this.onChangePicker.bind(this,'constructionPeriod')}>
                  <View className='tt'>
                    {!constructionPeriod&&<View className='from-input picker-con placeholder-class' >点击选择</View>}
                    {constructionPeriod&&<View className='from-input picker-con' >{constructionPeriod}</View>}
                    <Image className='drop-down-icon' src={right} />
                  </View>
                </Picker>
              </View>

              <View className='input-group '>
                <View className='input-name'>企业资质</View>
                <Input className='from-input' name='enterpriseQualification' placeholderClass='placeholder_class' placeholder='请填写企业资质' />
              </View>
              <Button className='page-submit' formType='submit'>立即计算</Button>
            </View>
        </Form>

        <PageFooterInfo />
      </View>
    )
  }
}

export default Page1StepTwo
